<template>
	<view class="login">
		<view class="content">
			<!-- 顶部头像图片 -->
			<view class="header">
				<image src="../../../static/images/icons/leju-logo.png" mode=""></image>
			</view>
			<!-- 中间两个输入框 -->
			<view class="main">
				<view class="user">
					<input type="text" placeholder="用户名/电话" v-model="username"/> 
				</view>
				<view class="password">
					<input type="password" placeholder="密码" v-model="password"/>
				</view>
			</view>
			<!-- 登录按钮 -->
			<button class="loginBtn" @click="submitLogin">登 录</button>
			<!-- 底部footer -->
			<view class="footer">
				<navigator url="">找回密码</navigator>
				<view class="line">|</view>
				<navigator url="/pages/my/register/register">注册账号</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { doLogin , getMemberInfo} from "@/api/my/login/login.js"
	export default {
		data() {
			return {
				username:'17596496508',
				password:'123456'
			};
		},
		methods:{
			// 登录
			submitLogin(){
				doLogin({
					username:this.username,
					password:this.password
				}).then(res=>{
					// console.log(res)
					
					if(res.success==true){
						// token存本地
						uni.setStorageSync('token',res.data.token);
						// 获取个人信息，存本地,my页面直接从本地取
						getMemberInfo().then(res=>{
							// console.log(res)
							uni.setStorageSync('userInfo',res.data.userInfo);	
						});
						// 提示弹窗
						uni.showToast({
						    title: '登陆成功,1秒后跳转至个人中心',
						    icon: 'success',
							duration:1000,
							success() {
								setTimeout(function(){
									uni.switchTab({
										url:'../my'
									});
								},1000)
							}
						});
					}else if(res.message=="手机号未注册"){
						uni.showToast({
							title: '您还未注册，请先注册',
							icon:'none'
						});
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding-top: var(--status-bar-height);
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		 .header {
			 width: 160rpx;
			 height: 160rpx;
			 box-shadow: 0rpx 0rpx 60rpx 0px rgba(0,0,0,.1);
			 border-radius: 50%;
			 background-color: #000;
			 margin-top: 128rpx;
			 margin-bottom: 72rpx;
			 margin-left: auto;
			 margin-right: auto;
			  image {
				  width: 160rpx;
				  height: 160rpx;
				  border-radius: 50%;
			  }
		 }
		 // 中间两个输入框
		 .main {
			 display: flex;
			 flex-direction: column;
			 padding-left: 70rpx;
			 padding-right: 70rpx;
			 .user , .password {
				 height: 36rpx;
				 color: #333;
				 padding: 32rpx;
				 margin-top: 24rpx;
				 margin-bottom: 24rpx;
				 border: none;
				 border-radius: 70rpx;
				 box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1);
				  input {
					  text-align: left;
					  font-size: 28rpx;
					  padding-right: 10rpx;
					  margin-left: 20rpx;
				  }
		    }
		 }
		 // 登录按钮
		 .loginBtn {
			 width: 600rpx;
			 height: 100rpx;
			 background-color: rgb(53, 78, 68);
			 color: #FFFFFF;
			 font-size: 30rpx;
			 line-height: 100rpx;
			 border-radius: 100rpx;
			 margin-top: 100rpx;
		 }
		 // 底部footer
		 .footer {
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 font-size: 28rpx;
			 margin-top: 64rpx;
			 color: rgba(0,0,0,.7);
			 text-align: center;
			 height: 40rpx;
			 line-height: 40rpx;
			  .line {
				  font-size: 24rpx;
				  margin-left: 14rpx;
				  margin-right: 14rpx;
			  }
		 }
	}
</style>
